<template>
	<div class="position_list">
		<div class="table_title">
			<div class="title_item" v-for="(item, index) in titleList" :key="index">{{item}}</div>
		</div>
		<div class="table_column" v-for="(item, index) in parkSpaceList" :key="index">
			<div class="column_item">{{item.space_name}}</div>
			<div class="column_item">{{item.space_area}}</div>
		</div>
	</div>
</template>

<script>
	import { defineComponent, reactive, ref, watch, toRefs } from "vue";
	export default defineComponent({
		props: {
			parkSpaceList: {
				type: Array,
				default: ()=>{return []}
			}
		},
		setup(props, context){
			return{
				titleList: ['车位名称', '可租/总面积(㎡)']
			}
		}
	})
</script>

<style lang="less" scoped>
	.position_list{
		width: 100%;
		height: 452px;
		overflow-y: scroll;
		.table_title{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
			border-bottom: 1px solid #eee;
			.title_item{
				color: #999;
			}
		}
		.table_column{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
			.column_item{
				color: #666;
			}
		}
	}
</style>